<template>
  <div id="app">
    <div id="nav" v-if="$route.meta.showTab">
      <ul>
        <router-link to="/home" tag="li">
        <i class="iconfont icon-shouye" v-if="$route.path.includes('/home')"></i>
          <i class="iconfont icon-shouye1" v-else></i>
          <p>首页</p>
        </router-link>

        <router-link to="/collect" tag="li">
          <i class="iconfont icon-fenlei"></i>
          <p>收藏</p>
        </router-link>

        <router-link to="/mine" tag="li">
        <i class="iconfont icon-icon02" ></i>
          <p>我的</p>
        </router-link>
      </ul>
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less">
@import "./assets/css/style.css";
@import "./fonts/iconfont.css";
#nav {
  width: 100%;
  height: 4.9rem;
  background: #ccc;
  position: fixed;
    left: 0;
    bottom: 0;
    z-index:999;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      flex: 1;
      text-align: center;
      // font-size: 16rem;
      i{
        font-size: 2.2rem;
      }
    }
  }
}
.router-link-active{
  color:blue;
}
</style>
